<template>
  <div class="content" id="loginPage">
    <!-- <vue-particles
      color="#999"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#999"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="LoginFlash"
    >
    </vue-particles> -->
    <div class="loginModal">
      <div class="headLogo flex items-center">
        <div class="logoPic">
          <img src="../assets/images/ouyeellogo_notxt.png" />
        </div>
        <div class="logoText">欢迎登录</div>
      </div>
      <div class="logoMain flex items-center justify-around">
        <div class="leftPic">
          <img src="../assets/images/1.png" />
        </div>
        <div class="loginForm">
          <el-tabs v-model="activeName" @tab-click="tabClick">
            <el-tab-pane label="手机验证" name="phone">
             <div class="inputBox">
              <input class="input" autocomplete="off" type="text" placeholder="手机号码">
             </div>
             <div class="inputBox">
              <input class="input" autocomplete="off" type="number" placeholder="手机验证码">
              <span class="getCode">获取验证码</span>
             </div>
            </el-tab-pane>
            <el-tab-pane label="账户登录" name="account">
              <div class="inputBox">
              <input class="input" autocomplete="off" type="text" placeholder="账户名">
             </div>
             <div class="inputBox">
              <input class="input" autocomplete="off" :type="passType" placeholder="账户密码">
              <span @click="changeType" class="el-icon-view"></span>
             </div>
             
            </el-tab-pane>
          </el-tabs>
          <div class="loginBtn t_center">
            <el-button type="primary" @click="submitLogin('loginForm')">登录</el-button>
          </div>
          <div class="loginOper flex justify-between">
            <a href="#">忘记密码</a>
            <a href="#">免费注册</a>
          </div>
        </div>
      </div>
    </div>
    <div class="footInfo">
      <div class="comModal flex justify-between items-end">
        <div class="infoLeft">
          <div class="links fs12 c666">
            <a class="inline" href="#">电商门户</a>
            <a class="inline" href="#">京东物流</a>
          </div>
          <div class="links fs12 c999">
            地址：中国上海宝山区漠河路600号A座28F 邮编：201999
          </div>
          <div class="links fs12 c999">
            <span>版权所有2016 欧冶云商股份有限公司 沪ICP备15018773号-1</span>
            <a href="#">沪公网安备 31011302006234 号</a>
          </div>
        </div>
        <div class="infoRight">
          <a href="#"><img src="../assets/images/btm_img002.jpg" alt="" /></a>
          <a href="#"><img src="../assets/images/btm_img003.jpg" alt="" /></a>
          <a href="#"><img src="../assets/images/btm_img005.jpg" alt="" /></a>
        </div>
      </div>
    </div>
    <div class="footLinks">
      <div class="comModal fs12 c999 flex">
        <div>友情链接：</div>
        <div class="flex-1 inline links">
          <p>
            <a class="inline" href="#">电商门户</a>
            <a class="inline" href="#">京东物流</a>
          </p>
          <p>
            <a class="inline" href="#">电商门户</a>
            <a class="inline" href="#">京东物流</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import {encrypt} from '@/common/login.js'
export default {
  name: "login",
  data() {
    return {
      activeName:'phone',
      loginForm: {
        username: "admin",
        password: "123456",
      },
      passType:'password',
    };
  },
  methods: {
    tabClick(){},
    submitLogin(formName) {
      const _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = { ...{}, ..._this.loginForm };
          // params.password = encrypt(params.password);
          this.$request({
            url: {
              name: "login",
              params,
            },
            method: "POST",
          }).then((res) => {
            if (res.success) {
              _this.$store.commit("setMenus", res.data.sysMenus);
              delete res.data.sysMenus;
              _this.$store.commit("setUserInfo", res.data);
              localStorage.setItem("userInfo", JSON.stringify(res.data));
              _this.$router.push({ path: "/" });
            }
          });
          //
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    changeType(){
      this.passType = this.passType=='password'?'text':'password'
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
#loginPage {
  position: relative;
  background: #fff;
  min-width: 1200px;
  // z-index: 0;
  // left:0;
  // top:0;
  a {
    display: inline-block;
    height: 100%;
    cursor: pointer;
  }
  .loginModal {
    width: 1200px;
    margin: 0 auto;
    min-height: 650px;
    height: calc(100vh - 185px);
    .el-form {
      padding-right: 30px;
      margin-top: 20px;
    }
  }
  .headLogo {
    height: 150px;
    width: 100%;
    .logoPic {
      height: 56px;
      margin-right: 30px;
      img {
        height: 100%;
      }
    }
    .logoText {
      font-size: 20px;
      color: #333;
      font-weight: 700;
    }
  }
}
.LoginFlash {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1;
}
.bg {
  background-image: url("../assets/images/login.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
}
.logoMain {
  position: relative;
  height:calc(100% - 150px);
  .leftPic {
    height: 500px;
    width: 500px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .loginForm {
    position: relative;
    z-index: 2;
    flex: 0 0 425px;
    max-width: 425px;
    position: relative;
    box-sizing: border-box;
    margin-top: 41px;
    height: 400px;
    padding: 30px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    .inputBox{
      width: 85%;
      margin:15px auto 30px;
      border-bottom:1px solid #eee;
      position: relative;
      .input{
        display: block;
        width: 100%;
        background: #fff;
        color: #606266;
        border:0;
        outline: none;
        font-size:14px;
        height: 40px;
        line-height: 40px;
          &::-webkit-input-placeholder{
            color:#b6b6b6;
          }
          &::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:#b6b6b6;
          }
          &:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:#b6b6b6;
          }
          &:-ms-input-placeholder{  /* Internet Explorer 10-11 */
           color:#b6b6b6;
          }
          &::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
          }
          &::-webkit-outer-spin-button {
            -webkit-appearance: none !important;
          }
          &[type="number"] {
            -moz-appearance: textfield;
          }

      }
      .getCode{
        position: absolute;
        height:40px;
        line-height: 40px;
        background: #fff;
        cursor: pointer;
        right:0;
        top:0;
        color:#0187fb;
      }
      .el-icon-view{
        position: absolute;
        height:40px;
        width: 40px;
        line-height: 40px;
        text-align: center;
        right:0;
        top:0;
        cursor: pointer;
        color:#999;
      }
    }
  }
}
.footLinks {
  background: #f4f4f4;
  padding: 10px 0;
  min-height: 50px;
  .links {
    line-height: 100%;
    p {
      margin-bottom: 10px;
    }
    a {
      padding: 0 15px;
      border-left: 1px solid #ccc;
      &:first-child {
        border-left: none;
      }
    }
  }
}
.comModal {
  width: 1200px;
  margin: 0 auto;
}
.footInfo {
  border-top: 1px solid #e3e3e3;
  margin-top: 20px;
  .comModal {
    padding: 14px 0;
    .infoLeft {
      .links {
        line-height: 100%;
        padding: 6px 0;
        span,
        a {
          padding: 0 15px;
          border-left: 1px solid #eee;
          &:first-child {
            padding-left: 0;
            border-left: none;
          }
        }
      }
    }
    .infoRight {
      img {
        height: 36px;
        display: inline-block;
        margin-left: 20px;
      }
    }
  }
}

.loginTitle {
  font-size: 18px;
  text-align: center;
  color: #666;
}
.loginBtn {
  padding:40px 0 20px;
  button {
    width: 90%;
  }
}
.loginOper{
  padding-top:10px;
  a:hover{
    color:#0187fb !important;
  }
}

</style>
<style lang="less">
.loginForm{
  .el-tabs__item{
  font-size: 18px !important;
  font-weight:600;
  &.is-active{
    color:#0187fb !important;
  }
}
.el-tabs__active-bar{
  background: #0187fb !important;
  width:80px !important;
}
}

</style>